{% extends 'users/base.html' %}

{% block title %}
    FuSite-注册
{% endblock %}

{% block body %}
    <div class="box">
        <h1 class="title has-text-centered has-text-wight-bold is-size-1">FuSite
            <br><span class="tag is-size-6">注册</span>
        </h1>
        <hr class="dropdown-divider">
        <form action="/users/register" method="post">
            <div style="margin-top: 2em;">
                <p>
                    <label for="id_username">用户名:</label>
                    <input type="text" minlength="2" name="username" class="input is-link" placeholder="用户名" maxlength="24" required id="id_username" value="{{ username }}">
                </p>
                <p style="margin-top: 1em;">
                    <label for="id_email">邮箱:</label>
                    <input type="email" class="input is-link" name="email" placeholder="邮箱" maxlength="32" required id="id_email" value="{{ email }}">
                </p>
                <p style="margin-top: 1em;">
                    <label for="id_password">密码:</label>
                    <input type="password" name="password" class="input is-link" placeholder="密码" minlength="8" maxlength="32" required id="id_password" value="{{ password }}">
                </p>
                <p style="margin-top: 1em;">
                    <label for="id_password1">再次确认密码:</label>
                    <input type="password" name="password1" class="input is-link" placeholder="密码" minlength="8" max="32" required id="id_password1" value="{{ password1 }}">
                </p>
                <div style="margin-top: 1em;">
                    <label for="id_verification">验证码:</label>
                    <div class="field has-addons">
                        <div class="control">
                            <input class="input is-link" type="text" minlength="6" maxlength="6" name="verification" id="id_verification" placeholder="验证码" required value="{{ verification }}">
                        </div>
                        <div class="control">
                            <button type="button" class="button is-link" id="button">发送验证码</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="is-pulled-left is-size-6 has-text-danger" style="margin-top: 1em;">
                <span>{{ error }}</span>
            </div>
            <div class="is-pulled-right is-size-6" style="margin-top: 1em;">
                <a href="/users/login">去登录?</a>
            </div>
            <div class="is-clearfix"></div>
            <input type="submit" style="margin-top: 1em;" class="button is-link is-fullwidth" value="提交">
        </form>
    </div>
{% endblock %}

{% block end %}
<script type="text/javascript">
    var btn = $("#button")[0];
    var time = 120;
    var reg = /^\s+$/g;
    btn.addEventListener('click',function(){
        this.disabled = true;
        var value = $("#id_email").val();
        var username = $("#id_username").val();
        if(validatorEmail(value)){
            if(username.length >= 2 && username.length <= 24){
                if(reg.test(username) == false){
                $.post("/users/send_email",
                {username:username,email:value,type:"register"},
                function(data,status){
                    if(data == "1"){
                        mui.alert("邮箱已存在");
                        btn.disabled = false;
                        btn.innerHTML = "发送验证码";
                        time = 120;
                    } else if(data == "2") {
                        mui.alert("用户名已存在");
                        btn.disabled = false;
                        btn.innerHTML = "发送验证码";
                        time = 120;
                    } else{
                        mui.alert("验证码发送成功,有效期20分钟");
                        var timer = setInterval(function(){
                            if(time == 0){
                                clearInterval(timer);
                                btn.disabled = false;
                                btn.innerHTML = "发送验证码";
                                time = 120;
                            } else {
                                btn.innerHTML = time + "秒之后重新发送";
                                time--;
                            }
                        },1000)
                    }
                },"text")
                } else {
                    mui.alert("用户名不能为空");
                    btn.disabled = false;
                    btn.innerHTML = "发送验证码";
                    time = 120;
                }
            } else {
                mui.alert("用户名的长度要大于2小于24");
                btn.disabled = false;
                btn.innerHTML = "发送验证码";
                time = 120;
            }
        }else{
            mui.alert("邮箱填写不符合要求");
            btn.disabled = false;
            btn.innerHTML = "发送验证码";
            time = 120;
        }
    })
    function validatorEmail(value){
        eval("var reg = /^([a-zA-z0-9_\.\-])+\@(([a-zA-z0-9\-])+\.)+([z-zA-z0-9]{2,4})+$/;");
        return RegExp(reg).test(value);
    }
</script>
{% endblock %}